<script setup>
// import vuePlugin from '@vitejs/plugin-vue'
import { ref } from 'vue'
import { registerUser, tologin } from '@/api/user.js'
import { useUserStore } from '@/stores'
import router from '@/router'

// import { el-icon-user } from '@element-plus/icons-vue '
const message = ref('Hello, Vue 3 with script setup!')
const user = ref({
  username: '',
  password: '',
  repassword: ''
})
const userref = ref(null)
const islogin = ref(true) // 默认为 false，表示未登录

// 切换登录和注册状态的函数
const toggleLogin = () => {
  islogin.value = !islogin.value // 切换状态
  resetForm() // 可选：重置表单输入
}
//重置表单内容
const resetForm = () => {
  // 清空用户输入
  user.value.username = ''
  user.value.password = ''
  user.value.repassword = ''
}

//表单校验
const rules = {
  username: [
    {
      required: true,
      message: '请输入账号',
      trigger: 'blur'
    },
    {
      min: 5,
      max: 12,
      pattern: /^[a-zA-Z0-9]{6,12}$/,
      message: '只能输入5-12个数字或字母',
      trigger: 'blur'
    }
  ],
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur'
    },
    {
      min: 5,
      max: 12,
      pattern: /^[0-9]{6,12}$/, // 正则表达式：只能包含5-12个数字
      message: '请输入5-12个数字',
      trigger: 'blur'
    }
  ],
  repassword: [
    {
      required: true,
      min: 5,
      max: 12,
      pattern: /^[0-9]{6,12}$/, // 正则表达式：只能包含5-12个数字
      message: '请输入5-12个数字',
      trigger: 'blur'
    },
    {
      validator: (rule, value, callback) => {
        if (value !== user.value.password) {
          // 确保 'password' 与 ruleForm 中的字段匹配
          callback(new Error('两次输入的密码不一致！'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
}

// 注册按钮事件
const handleSubmit = async () => {
  // 表单验证成功后再进行接口连接
  await userref.value.validate()
  await registerUser(user.value)
  //注册成功，提示跳转
  open2('注册成功')
  toggleLogin()
}

//
const login = async () => {
  await userref.value.validate()
  //接收登陆成功的结果，得到token
  const res = await tologin(user.value)
  console.log(res)
  open2('登陆成功')
  //设置token
  const userStore = useUserStore()
  userStore.setToken(res.token)
  // 跳转页面
  router.push('/article/manage')
}
const open2 = (mes) => {
  ElMessage({
    message: mes,
    type: 'success'
  })
}
</script>

<template slot-scope="scope">
  <el-row>
    <el-col :span="12">
      <div class="grid-content bg-purple">欢迎使用</div>
      <div>{{ message }}</div>
    </el-col>

    <!-- offset表示，左右各占3 -->
    <el-col :span="6" :offset="3">
      <div class="grid-content bg-purple-light">
        <el-form :model="user" ref="userref" label-width="100px" :rules="rules">
          <div v-if="islogin">
            登陆
            <el-form-item label="账号" prop="username">
              <el-input v-model="user.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input v-model="user.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="login">登陆</el-button>
              <el-button @click="toggleLogin">去注册</el-button>
            </el-form-item>
          </div>

          <div v-else>
            注册
            <el-form-item label="账号" prop="username">
              <el-input v-model="user.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item type="password" label="密码" prop="password">
              <el-input v-model="user.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="repassword">
              <el-input v-model="user.repassword" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="handleSubmit">注册</el-button>
              <el-button @click="toggleLogin">切换到登陆</el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </el-col>
  </el-row>
</template>

<style>
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple {
  background: #d3dce6;
  font-size: 30px;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  height: 100vh;
  display: flex;
  align-items: center; /* 垂直居中 */
}
</style>
